<template>
<div class="workpage">
	<div class="workpageconts backTop">
		<div class="workpagecontsLeft">
			<!-- 技术标签分类 -->
			<div class="workClass">
				<h3 class="workClassTitle">标签分类：</h3>
				<ul class="workClassNames clearfix">
					<li class="workClassLis fl" @click="workClassLisClick('all')"><i class="masks"></i>全部</li>
					<li class="workClassLis fl" @click="workClassLisClick('html')"><i class="masks"></i>Html/Html5</li>
					<li class="workClassLis fl" @click="workClassLisClick('css')"><i class="masks"></i>CSS/CSS3</li>
					<li class="workClassLis fl" @click="workClassLisClick('js')"><i class="masks"></i>JavaScript</li>
					<li class="workClassLis fl" @click="workClassLisClick('jq')"><i class="masks"></i>Jquery</li>
					<li class="workClassLis fl" @click="workClassLisClick('node')"><i class="masks"></i>Node</li>
					<li class="workClassLis fl" @click="workClassLisClick('vue')"><i class="masks"></i>Vue</li>
				</ul>
			</div>
			<!-- 技术文章列表 -->
			<div class="workArticleBox">
				<h3 class="workClassTitle">文章列表</h3>
				<ul class="workArticleConts" v-if="artItemData.length">
					<li class="workArticleLis" v-for="item in artItemData" :key="item.id" @click="showArtDetail(item.id)" :id="item.id">
						<Card>
							<div class="careBoxAuto clearfix">
								<!-- 文章列表左侧的图片 -->
								<div class="artLisImgBox fl"><img :src="item.artLeftImg" alt=""></div>
								<!-- 文章列表右侧的信息相关 -->
								<div class="artLisContBox fl">
									<!-- 标题 -->
									<h3>{{item.title}}</h3>
									<!-- 作者、日期、分类、来源等信息说明 -->
									<ul class="artLisInfoBox clearfix">
										<li class="fl">作者：{{item.author}}</li>
										<li class="fl">时间：{{item.writeTime}}</li>
										<li class="fl">标签：{{item.artMark}}</li>
										<li class="fl">来源：{{item.sources}}</li>
									</ul>
									<p class="artLisCont">{{item.info}}</p>
									<ul class="artLisStatus clearfix">
										<li class="fl"><Icon type="ios-heart-outline"></Icon> 赞 {{item.praiseNum}}</li>
										<li class="fl"><Icon type="ios-chatboxes-outline"></Icon> 评论 {{item.discussNum}}</li>
									</ul>
								</div>
							</div>
						</Card>
					</li>
				</ul>
				<div class="nullData" v-else>该标签下暂时没有相关文章，敬请期待！</div>
			</div>
		</div>
		<div class="workpagecontsRight">
			<!-- 闲聊技术页面的右侧部分 -->
			<pageContRight></pageContRight>
		</div>
		<Spin size="large" fix v-if="spinShow"></Spin>
	</div>
</div>
</template>

<script>
import pageContRight from './../pageModule/pageContRight'
export default {
	name: 'workpage',
	components: {
		pageContRight
	},
	data: function (){
		return {
			artItemData: [],
			artItemDatas: '',//存放模拟的动态数据
			spinShow: true
		}
	},
	mounted(){
		this.$ajax.get("https://www.easy-mock.com/mock/5a93ac92bf782667fe4c7a32/followTest/artLists").then(response => {
			// success callback
			this.artItemDatas = response.data.data.datas ////获取模拟的动态数据
			this.artItemData = response.data.data.datas
			this.spinShow = false //数据加载成功之后处理掉加载层的遮罩
		}, response => {
			// error callback
			alert('数据加载失败...')
		})
	},
	methods: {
		workClassLisClick: function (name){//模拟动态数据
			this.artItemData = []
			if(name == 'all'){
				this.artItemData = this.artItemDatas
			}else if(name == 'html'){
				this.artItemData.push(this.artItemDatas[0])
			}else if(name == 'css'){
				this.artItemData.push(this.artItemDatas[1])
				this.artItemData.push(this.artItemDatas[5])
			}else if(name == 'jq'){
				this.artItemData.push(this.artItemDatas[2])
				this.artItemData.push(this.artItemDatas[6])
			}else if(name == 'node'){
				this.artItemData.push(this.artItemDatas[3])
				this.artItemData.push(this.artItemDatas[7])
			}else if(name == 'vue'){
				this.artItemData.push(this.artItemDatas[4])
			}
		},
		showArtDetail: function (id){//点击获取文章详情
			window.location.href = '/home/workpage/articleDetails?id='+id;
		}
	}
}
</script>
<style>
.workpage{
	width: 100%;
	height: calc(100% - 35px);
	overflow: auto;
	margin-bottom: 35px;
}
.workpageconts{
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	position: relative;
	overflow: auto;
}
.workpagecontsLeft{
	position: absolute;
	left: 20px;
	top: 10px;
	right: 380px;
}
.workpagecontsRight{
	position: absolute;
    width: 320px;
    top: 10px;
    right: 20px;
	border: 1px solid #e3e8ee;
}
.workClassTitle{
	font-size: 16px;
	font-weight: bold;
	border-left: 5px solid #2C3E50;
	padding-left: 5px;
	line-height: 22px;
	text-align: left;
}
.workClassNames{
	padding-left: 30px;
	margin: 15px 0 20px;
}
.workClassLis{
	width: 120px;
	line-height: 40px;
	font-size: 14px;
	font-weight: bold;
	margin: 0 15px 15px 0;
	background: #caddf1;
	text-align: center;
	position: relative;
	cursor: pointer;
}
.masks{
	width: 0;
	height: 40px;
	background: rgba(255,255,255,.6);
	position: absolute;
	left: 0;
	top: 0;
	transition: 0.5s;
	cursor: pointer;
}
.workClassLis:hover .masks{
	width: 120px;
}
.artLisImgBox{
	margin-right: 20px;
	transition: 0.5s;
}
.artLisImgBox img{
	width: 200px;
	height: 120px;
	border-radius: 3px;
}
.artLisImgBox:hover{ 
    -webkit-filter: blur(2px); /* Chrome, Opera */
       -moz-filter: blur(2px);
        -ms-filter: blur(2px);    
            filter: blur(2px);    
}
.artLisContBox{
	width: calc(100% - 230px);
}
.artLisInfoBox li,.artLisStatus li{
	color: #c5c5c5;
	margin-right: 25px;
}
.artLisStatus{
	margin-top: 10px;
}
.artLisCont{
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.artLisContBox h3{
	text-align: left;
	margin-bottom: 5px;
}
.workArticleConts{
	margin-top: 15px;
}
.workArticleLis{
	height: 160px;
	margin-bottom: 10px;
	cursor: pointer;
}
.nullData{
	line-height: 60px;
    font-size: 16px;
    color: #ccc;
}
</style>